<template>
  <div 
    class="x-bar" 
    :id="chartId"
    :option='option'>
  </div>
</template>

<script>
import { formatNum } from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data() {
    return {
      chart: '',
      option: {
        color: ['#0d194a','#46feff'],
        grid: {
          top : '12%',
          left: '0%',
          right: '14%',
          bottom: '2%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          axisLabel: {
            textStyle: {
              color: '#fff',
              fontWeight: '80'
            }
          },
          axisLine :{
            show : true,
            lineStyle : {
              color : '#5364a6'
            }
          },
          splitLine :{
            show : false,
          }
        },
        yAxis: {
          type: 'category',
          data: ['其他','xxxxx','xxx33xx','xxxxxx','xxxx','xxxx'],
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 0,
            margin: 10,
            inside: false,
            textStyle: {
              color: '#fff',
              fontWeight: '50'
            }
          },
          axisLine :{
            show : true,
            lineStyle : {
              color : '#5364a6'
            }
          },
          axisTick : {
            show : false
          }
        },
        series: [
          {
            name : '背景',
            type: 'bar',
            barWidth: '15',
            barGap: '-100%',
            data: [50000,50000,50000,50000,50000,50000] //传入最大值
          },
          {
            type: 'bar',
            barWidth: '15',
            zlevel: 1,
            label: {
              normal: {
                show: true,
                formatter: function(v) {
                  var val = v.data;
                  if (val == 0) {
                      return '';
                  }
                  return formatNum(val);
                },
                color: '#fff',
                position : 'right',
                distance : 4,
              }
            },
            data: [24800,8000,10200,11293,12323,50000]//传入数据
          }
        ]  
      }
    }
  },
  methods : {
    init() {
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped> 
  .x-bar {
    width: 100%;
    height: 100%;
  }
</style>

